<template>
  <a-menu mode="inline" theme="dark" :inline-collapsed="collapsed" @select="onMenuSelect">
    <template v-for="item in menuList" :key="item.id">
      <template v-if="item.is_show">
        <template v-if="!item.children">
          <a-menu-item :key="item.id">
            <PieChartOutlined />
            <!-- 组件传值--->
            <span>{{ item.name }}</span>
          </a-menu-item>
        </template>
        <template v-else>
          <sub-menu :menu-info="item" :key="item.id" />
        </template>
      </template>
    </template>
  </a-menu>
</template>

<script lang="ts">
import { PieChartOutlined } from "@ant-design/icons-vue"
import { defineComponent } from "vue"
import SubMenu from "./sub-menu.vue"
export default defineComponent({
  props: {
    collapsed: {
      type: Boolean,
      default: false
    },
    menuList: {
      type: Array,
      default: () => []
    }
  },
  components: {
    "sub-menu": SubMenu,
    PieChartOutlined
  },
  setup() {
    const onMenuSelect = ({ item, key, selectedKeys }: any) => {
      console.log({ item, key, selectedKeys })
    }
    return {
      onMenuSelect
    }
  }
})
</script>
